<template>
  <div class="right-nav">
    <a class="to-top" @click.stop="toTop"></a>
    <router-link to="/" class="to-service"></router-link>
    <router-link to="/" class="to-home"></router-link>
    <router-link to="/" class="to-play"></router-link>
  </div>
</template>

<script>
export default {
  name: 'RightNav',
  methods: {
    toTop() {
      document.documentElement.scrollTop = 0;
    }
  }
};
</script>

<style lang="less" scoped>
  .right-nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 50px;
    right: 20px;
    width: 40px;
    height: 160px;
    a {
      flex: 1;
      cursor: pointer;
    }
    // 回到顶部
    .to-top {
      background: url(/static/img/right_nav.png) no-repeat center;
      background-position: 0 0;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      &:hover {
        background: url(/static/img/right_nav_hover.png) no-repeat center;
        background-position: 0 0;
      }
    }
    // 客服
    .to-service {
      background: url(/static/img/right_nav.png) no-repeat center;
      background-position: 0 -40px;
      &:hover {
        background: url(/static/img/right_nav_hover.png) no-repeat center;
        background-position: 0 -40px;
      }
    }
    // 主页
    .to-home {
      background: url(/static/img/right_nav.png) no-repeat center;
      background-position: 0 -80px;
      &:hover {
        background: url(/static/img/right_nav_hover.png) no-repeat center;
        background-position: 0 -80px;
      }
    }
    // 娱乐城
    .to-play {
      background: url(/static/img/right_nav.png) no-repeat center;
      background-position: 0 -120px;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      &:hover {
        background: url(/static/img/right_nav_hover.png) no-repeat center;
        background-position: 0 -120px;
      }
    }
  }
</style>
